<!DOCTYPE html>
<html>
<head>
    <title>bPage使用实例</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../lib/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../lib/font-awesome-4/css/font-awesome.min.css" />
    
	<link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCore.css" type="text/css">
	<link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shThemeDefault.css" type="text/css">
	
	<link rel="stylesheet" href="../lib/bpage/b.page.bootstrap3.css" type="text/css">
    
    <link rel="stylesheet" href="../css/bpage/header.css" />
    <link rel="stylesheet" href="../css/bpage/docs.css" />
</head>

<body>
    <header class="navbar navbar-static-top" id="top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="https://terryz.github.io/bpage/index.html" class="navbar-brand">bPage</a>
        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="guide.html" >入门</a>
                </li>
                <li class="active">
                    <a href="javascript:void(0);" >实例</a>
                </li>
                <li>
                    <a href="docs.html" >文档</a>
                </li>
                <li>
                    <a href="changelog.html" >更新记录</a>
                </li>
                <li>
                    <a href="message.html" >留言/反馈</a>
                </li>
                <li>
                    <a href="https://terryz.github.io" >主页</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://github.com/TerryZ/bPage" target="_blank"><i class="fa fa-lg fa-github"></i> Fork on Github</a></li>
            </ul>
        </nav>
    </div>
    </header>

	<div class="content">
	<div class="container" style="margin-top: 30px;">
		<div class="alert alert-info" role="alert">由于分页的功能均是与服务端进行交互，在静态页面中仅能展示具体代码进行讲解，因此本页面中无法进行实际功能的展示</div>
			<h2 class="page-header">1.页面跳转模式 <small>每次分页操作都是加载新的页面</small></h2>
			<div class="row-fluid">
				<table class="table table-striped table-bordered table-hover table-condensed">
					<thead>
						<tr>
							<th class="selectColumn" >选择</th>
							<th>登录名</th>
							<th>姓名</th>
							<th>性别</th>
							<th>出生年月</th>
							<th>电话</th>
							<th>电子邮箱</th>
							<th>状态</th>
							<th>更新时间</th>
						</tr>
					</thead>
					<tbody>
						<c:if test="${userList.list != null}">
							<c:forEach var="d" items="${userList.list}">
						<tr>
							<td class="selectColumn"><input type="radio" name="userSelect" value="${d.id}" /></td>
							<td>${d.login_name}</td>
							<td>${d.name}</td>
							<td>${d.sexName}</td>
							<td>${d.birthday}</td>
							<td>${d.phone1}</td>
							<td>${d.email}</td>
							<td>${d.statusName}</td>
							<td>${d.update_time}</td>
						</tr>
							</c:forEach>
						</c:if>
					</tbody>
				</table>
				<c:if test="${userList != null}">
				<input type="hidden" id="pageNumber" value="${userList.pageNumber}">
				<input type="hidden" id="pageSize" value="${userList.pageSize}">
				<input type="hidden" id="totalPage" value="${userList.totalPage}">
				<input type="hidden" id="totalRow" value="${userList.totalRow}">
				</c:if>
			</div>
			
			<div class="row-fluid">
				<div id="page1"></div>

<h4>HTML内容处理</h4>
<p>页面的部分需要以传统的动态页面的方式进行渲染表格内部的数据，而数据则在加载页面前的服务端已提供，渲染表格数据的同时需要对分页数据也进行生成，以便插件在初始化时获取分页信息数据</p>
<script type="syntaxhighlighter" class="brush:html">
<![CDATA[
<!-- HTML代码、服务端内容填充 -->
<table class="table table-striped table-bordered table-hover table-condensed">
	<thead>
		<tr>
			<th class="selectColumn" >选择</th>
			<th>登录名</th>
			<th>姓名</th>
			<th>性别</th>
			<th>出生年月</th>
			<th>电话</th>
			<th>电子邮箱</th>
			<th>状态</th>
			<th>更新时间</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="selectColumn"><input type="radio" name="userSelect" value="$ {d.id}" /></td>
			<td>$ {d.login_name}</td>
			<td>$ {d.name}</td>
			<td>$ {d.sexName}</td>
			<td>$ {d.birthday}</td>
			<td>$ {d.phone1}</td>
			<td>$ {d.email}</td>
			<td>$ {d.statusName}</td>
			<td>$ {d.update_time}</td>
		</tr>
	</tbody>
</table>
<!-- 生成分页数据内容，必须设置 -->
<c:if test="${userList != null}">
<input type="hidden" id="pageNumber" value="$ {userList.pageNumber}">
<input type="hidden" id="pageSize" value="$ {userList.pageSize}">
<input type="hidden" id="totalPage" value="$ {userList.totalPage}">
<input type="hidden" id="totalRow" value="$ {userList.totalRow}">
</c:if>

<!-- 分页栏 -->
<div id="page1"></div>
]]>
</script>
<h4>javascript处理</h4>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//javascript初始化
$('#page1').bPage({
	//页面跳转的目标位置
    url : $webroot + 'demo/manage/page',
	//分页数据设置
    totalPage : $('#totalPage').val(),
    totalRow : $('#totalRow').val(),
    pageSize : $('#pageSize').val(),
    pageNumber : $('#pageNumber').val(),
	//页面跳转时需要同时传递给服务端的自定义参数设置
    params : function(){
        return {
            userName : 'zhangsan',
            age : 42
        };
    }
});
]]>
</script>
			</div>
			




			<h2 class="page-header">2.异步加载模式（服务端返回页面模式） <small>必须在服务端已准备好对业务数据，分页数据进行渲染页面</small></h2>
			<div class="row-fluid">
				<div id="pageContent"></div>
				<div id="page2"></div>
				
<h4>HTML部分处理</h4>
<p>这里不再贴出服务端渲染业务数据、分页数据的页面内容，内容与上文中提到的页面跳转模式的HTML处理部分类似，区别在于这部分内部被提取到单独的页面，根据业务的需要，也许业务数据渲染的页面会被多个场景所使用</p>
<p><span class="label label-primary">注意</span> 分页字段的存放，尽可能放在页面的根级，若放在较深的层级，程序或将读取不到分页数据内容</p>
<script type="syntaxhighlighter" class="brush:html">
<![CDATA[
<!-- HTML代码、服务端内容填充 -->
<div id="pageContent"></div>
<div id="page2"></div>
]]>
</script>
<h4>javascript部分处理</h4>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//javascript初始化
$('#page2').bPage({
	//链接指向服务端用于返回数据渲染页面的位置
    url : $webroot + 'demo/manage/pageLoad',
    //开启异步处理模式
	asyncLoad : true,
	//服务端页面处理模式
    serverSidePage : true,
	//页面填充目标区域，支持jquery表达式
    asyncTarget : '#pageContent',
    params : function(){
        return {
            userName : 'zhangsan',
            age : 42
        };
    }
});
]]>
</script>
			</div>
			
			<h2 class="page-header">3.异步加载模式（服务端返回JSON数据模式） <small>最灵活的分页方式，可使用数据根据业务场景进行定制处理</small></h2>
			<div class="row-fluid">
				<div id="pageJsonContent">
					<table id="dataGridTableJson" class="table table-striped table-bordered table-hover table-condensed">
						<thead>
							<tr>
								<th class="selectColumn" >选择</th>
								<th>登录名</th>
								<th>姓名</th>
								<th>性别</th>
								<th>出生年月</th>
								<th>电话</th>
								<th>电子邮箱</th>
								<th>状态</th>
								<th>更新时间</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
				<div id="page3"></div>
				

<h4>HTML部分设置</h4>
<p>在数据模式下，通常只需要设置表格的主体结构，数据填充的部分在tbody中进行处理即可，所以这里仅留一个空的tbody</p>
<script type="syntaxhighlighter" class="brush:html">
<![CDATA[
<!-- HTML代码、服务端内容填充 -->
<div>
	<!-- 定义表格框架 -->
	<table id="dataGridTableJson" class="table table-striped table-bordered table-hover table-condensed">
		<thead>
			<tr>
				<th class="selectColumn" >选择</th>
				<th>登录名</th>
				<th>姓名</th>
				<th>性别</th>
				<th>出生年月</th>
				<th>电话</th>
				<th>电子邮箱</th>
				<th>状态</th>
				<th>更新时间</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>
<div id="page3"></div>
]]>
</script>

<h4>服务端返回的json数据内容</h4>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
{
    "pageSize": 10,
    "pageNumber": 1,
    "totalRow": 11,
    "totalPage": 2
    "list": [
        {
            "expert": "计算机网络",
            "birthday": "2014-11-12",
            "sex": 1,
            "status": 1,
            "remark": "asdfasdfsdf",
            "sexName": "男",
            "statusName": "启用",
            "phone2": "13777777777",
            "password": "e10adc3949ba59abbe56e057f20f883e",
            "phone1": "13655555555",
            "id": 1,
            "update_time": "2014-11-24 15:50:22",
            "email": "aaa@aa.com",
            "login_name": "zhangsan",
            "name": "张三",
            "create_time": "2014-09-08 16:22:01",
            "qq": "44444444"
        },
        {
            "expert": "计算机网络1",
            "birthday": "2014-11-03",
            "sex": 0,
            "status": 1,
            "remark": "124312431",
            "sexName": "女",
            "statusName": "启用",
            "phone2": "1234123421",
            "password": "",
            "phone1": "1241342341431",
            "id": 5620,
            "update_time": "2014-11-24 13:37:58",
            "email": "341431@aa.comn",
            "login_name": "lisi",
            "name": "李四",
            "create_time": "2014-09-08 22:24:05",
            "qq": "34124121"
        }
    ]
}
]]>
</script>
<h4>javascript处理部分</h4>
<p>对于数据的处理将在render回调函数中进行处理</p>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//javascript初始化
$('#page3').bPage({
    url : $webroot + 'demo/manage/pageLoadJson',
    //开启异步处理模式
	asyncLoad : true,
	//关闭服务端页面模式
    serverSidePage : false,
	//数据自定义填充
    render : function(data){
    	var tb = $('#dataGridTableJson tbody');
    	$(tb).empty();
    	if(data && data.list && data.list.length > 0){
    		$.each(data.list,function(i,row){
    			var tr = $('<tr>');
    			$(tr).append('<td></td>');
    			$(tr).append('<td>'+row.login_name+'</td>');
    			$(tr).append('<td>'+row.name+'</td>');
    			$(tr).append('<td>'+row.sexName+'</td>');
    			$(tr).append('<td>'+row.birthday+'</td>');
    			$(tr).append('<td>'+row.phone1+'</td>');
    			$(tr).append('<td>'+row.email+'</td>');
    			$(tr).append('<td>'+row.statusName+'</td>');
    			$(tr).append('<td>'+row.update_time+'</td>');
    			$(tb).append(tr);
    		});	    		
    	}
    },
    params : function(){
        return {
            userName : 'zhangsan',
            age : 42
        };
    }
});
]]>
</script>
			</div>
		
		
		
		
		
		
		
		
		
		
		
		
<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://https-terryz-github-io.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
		
		
	</div>
	</div>








    






<script type="text/javascript" src="../lib/jquery.min.js" ></script>
<script type="text/javascript" src="../lib/jquery-ui.min.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushCss.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js" ></script>
<script type="text/javascript">
$(function(){
	SyntaxHighlighter.all();
});
</script>

<script type="text/javascript" src="../lib/bpage/b.page.js" ></script>

<script type="text/javascript" src="../js/bpage/demo.js" ></script>
<script type="text/javascript" src="../js/count.js" ></script>
</body>
</html>